@charset "utf-8";
@import "common/reset";
//像素比除以2
@function p($px) {
    @return $px/2+px;
}

body,
html {
    width: 100%;
    height: 100%;
}
header{
    width: 100%;
    height: p(88);
    background: #0f0f0f;
    display: flex;
//  justify-content: space-around;
    align-items: center;
    .cha{
        width: p(34);
        height: p(34);
        overflow: hidden;
        display: flex;
        margin-left: 5%;
        img{
            width: 100%;
        }
    }
    .gan{
        width: p(2);
        height: p(59);
        border: p(2) solid #000;
        margin-left: 5%;
    }
    h1{
        font-size: p(34);
        color: #fff;
        margin-left: 5%;
    }
    .dian{
        width: p(6);
        height: p(34);
        overflow: hidden;
        margin-left: 50%;
        img{
            width: 100%;
        }
    }
}
//账户管理主要内容
.zhgl {
    width: 100%;
    height: 100%;
    padding-left: p(19);
    padding-right: p(19);
    background: url(../img/beijing.png);
    padding-top: p(25);
    //账户管理上边
    .zhgl_t {
        background: #fff;
        width: 100%;
        border: p(1) solid #cfcbce;
        //头像
        //隐藏内容
        #tx{
            display: none;
        }
        #tx:checked ~ label .tx .zhtx .yjt{
            transform: rotate(90deg);
        }
        #tx:checked ~ .ycnr ul{
            height: p(293);
        }
        #tx:checked ~ .ycnr ul li:nth-child(1){
            transform: rotateX(0) rotateY(0);
        }
        #tx:checked ~ .ycnr ul li:nth-child(2){
            transform: rotateX(0) rotateY(0);
        }
        #tx:checked ~ .ycnr ul li:nth-child(3){
            transform: rotateX(0) rotateY(0);
        }
        #tx:checked ~ .ycnr ul li:nth-child(4){
            transform: rotateX(0) rotateY(0);
        }
        #tx:checked ~ .ycnr ul li:nth-child(5){
            transform: rotateX(0) rotateY(0);
        }
        
        .tx {
            border-bottom: p(1) solid #cbc9cc;
            display: flex;
            justify-content: space-between;
            .tx_1 {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                p {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: p(39);
                }
            }
        }
        //账户头像
        .zhtx {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .zhtx_1 {
                width: p(106);
                height: p(106);
                overflow: hidden;
                margin-top: p(19);
                margin-bottom: p(23);
                img {
                    width: 100%;
                }
            }
            .yjt{
                transform:rotate(0);
                
            }
        }
        //头像文字调节
        .tx_1 {
            p {
                font-size: p(26);
                color: #606060;
            }
        }
        //右箭头
        .yjt {
            font-size: p(29);
            margin-right: p(19);
            margin-left: p(32);
            transform: rotate(0);
        }
        //隐藏内容
        .ycnr{
            text-align: center;
            ul{
                height: 0;
                  overflow: hidden;
                  transition: 1s;
              li{
                  
                  padding: p(8) 0;
                  border-bottom: p(1) solid #d9d9d9;
                  
              } 

              
            }
        }
        
        
    }
   
    
    
    //用户名
    .yhm {
        width: 100%;
        border-top: p(1) solid #cbc9cc ;
        border-bottom: p(1) solid #cbc9cc;
        display: flex;
        justify-content: space-between;
        //通用
        .yhm_1 {
            margin-top: p(27);
            margin-bottom: p(27);
            p {
                font-size: p(26);
                color: #606060;
                margin-left: p(39);
            }
        }
        .yjt {
            display: flex;
            font-size: p(29);
            margin-right: p(19);
            margin-left: p(32);
            align-items: center;
            transform: rotateX(0);
            
        }
    }
    
    //昵称
    .nc {
        border-top: p(1) solid #d9d9d9;
        border-bottom: p(1) solid #cbc9cc;
        display: flex;
        justify-content: space-between;
        //通用
        .nc_1 {
            margin-top: p(27);
            margin-bottom: p(27);
            p {
                font-size: p(26);
                color: #606060;
                margin-left: p(39);
            }
        }
        .yjt {
            display: flex;
            font-size: p(29);
            margin-right: p(19);
            margin-left: p(32);
            align-items: center;
        }
    }
    //性别
    .xb {
        border-bottom: p(1) solid #cbc9cc;
        display: flex;
        justify-content: space-between;
        //通用
        .xb_1 {
            margin-top: p(27);
            margin-bottom: p(27);
            p {
                font-size: p(26);
                color: #606060;
                margin-left: p(39);
            }
        }
        .yjt {
            display: flex;
            font-size: p(29);
            margin-right: p(19);
            margin-left: p(32);
            align-items: center;
        }
    }
    //出生日期
    .csrq {
        display: flex;
        justify-content: space-between;
        //通用
        .csrq_1 {
            margin-top: p(27);
            margin-bottom: p(27);
            p {
                font-size: p(26);
                color: #606060;
                margin-left: p(39);
            }
        }
        .yjt {
            display: flex;
            font-size: p(29);
            margin-right: p(19);
            margin-left: p(32);
            align-items: center;
        }
    }
}

//账户管理下边
.zhgl_b {
    background: #fff;
    width: 100%;
    margin-top: p(21);
    border: p(1) solid #cfcbce;
    //地址管理
    .dzgl {
        border-bottom: p(1) solid #cbc9cc;
        display: flex;
        justify-content: space-between;
        //通用
        .dzgl_1 {
            margin-top: p(27);
            margin-bottom: p(27);
            p {
                font-size: p(26);
                color: #606060;
                margin-left: p(39);
            }
        }
        .yjt {
            display: flex;
            font-size: p(29);
            margin-right: p(19);
            margin-left: p(32);
            align-items: center;
        }
    }
    //支付方式
    .zffs {
        border-bottom: p(1) solid #cbc9cc;
        display: flex;
        justify-content: space-between;
        //通用
        .zffs_1 {
            margin-top: p(27);
            margin-bottom: p(27);
            p {
                font-size: p(26);
                color: #606060;
                margin-left: p(39);
            }
        }
        .yjt {
            display: flex;
            font-size: p(29);
            margin-right: p(19);
            margin-left: p(32);
            align-items: center;
        }
    }
    //账户安全
    .zhaq {
        display: flex;
        justify-content: space-between;
        //通用
        .zhaq_1 {
            margin-top: p(27);
            margin-bottom: p(27);
            p {
                font-size: p(26);
                color: #606060;
                margin-left: p(39);
            }
        }
        .yjt {
            display: flex;
            font-size: p(29);
            margin-right: p(19);
            margin-left: p(32);
            align-items: center;
        }
    }
}


